<template>
	<div>
		<h1>User List</h1>
		<ul v-for="u in users">
			<li>
				{{u.id}} - {{u.account}}
			</li>
		</ul>

		<Pagination :total="total" :size-limit="5" :cur="1" @page-change="loadData" event-name="loaded"></Pagination>
	</div>
	
</template>
<script>
// import Pagination from './Pagination.vue'

export default {
	name: 'Users',
	data() {
		return {
			users: [],
			total: 0
		}
	},
	components: {
		Pagination: require('./Pagination.vue')
	},
	methods: {
		loadData: function(cur) {
			console.log('load data, page: %s', cur);
			this.ajax.get('/dist/list.json').then(response => {
				this.$set(this.$data, 'users', response.data);
				this.total = 999;

				this.$bus.$emit('loaded', this.total);
			})
		}
	},
	created() {
		this.loadData(1);
	}
}
</script>